import './table.css'
import { useState } from 'react'
import PropTypes from "prop-types"
const Table_Props =(props)=>{
    //属性
    const [info,ChangInfo]=useState({
        data:"",
        titile:"",
        check:""
    })
    //方法(往父组件的数组中添加对象)
    const ChangeAA=()=>{
        console.log(info)
        props.ChangeAddlist(info)
        //添加完后清空input
        ChangInfo(()=>{
            return{
                ...info,
                data:"",
                titile:"",
                check:"",
            }
        })
    }
    //更改遍历日期
   const Setdata=(e)=>{
        ChangInfo(()=>{
            return{
                ...info,
                data:e.target.value
            }
        }) 
    }
    //更改标题
    const Settitle=(e)=>{
        ChangInfo(()=>{
            return{
                ...info,
                titile:e.target.value
            }
        })
    }
    //更改优先级
    const Setcheck=(e)=>{
        ChangInfo(()=>{
            return{
                ...info,
                check:e.target.value
            }
        })
    }
    //页面
    return(
        <>
            <div className="table_props">
                <div>
                    <span>
                        日期：
                    </span>
                    <input type="text" value={info.data} onChange={Setdata}/>   
                </div>   
                <div>
                    <span>
                       标题： 
                    </span>
                    <input type="text" value={info.titile} onChange={Settitle}/>   
                </div>    
                <div>
                    <span>
                        优先级：
                    </span>
                    <input type="text" value={info.check} onChange={Setcheck}/>   
                </div> 
                <div>
                    <button onClick={ChangeAA}>添加</button>      
                </div>    
            </div>
        </>
    )
}

export default Table_Props